<template>
  <div class="bg-white rounded-xl p-4 shadow-[0px_0px_20px_0px_rgba(0,0,0,0.04)]">
    <div class="flex flex-row mb-2 items-center">
      <div class="mr-2 yxt-blue-50 rounded-sm px-2 py-1 whitespace-nowrap">
        <p
          class="text-xs px-2 py-1 rounded-sm"
          :style="{
            color: getStatusInfo(item.status).color,
            backgroundColor: getStatusInfo(item.status).bgColor,
          }"
        >
          {{ getStatusInfo(item.status).name }}
        </p>
      </div>

      <!-- {{ item.name }} -->
      <div class="flex flex-col w-full">
        <div class="flex flex-row w-full justify-between items-start">
          <van-text-ellipsis
            class="font-bold break-words flex-1 mr-2"
            :content="item.name"
          />

          <div
            v-if="item.riskCount > 0"
            class="flex flex-row items-center bg-[#FDF5CD] px-2 rounded-sm flex-shrink-0"
          >
            <img src="@/icons/svg/myXmate/warning.svg" class="mr-1" />
            {{ item.riskCount }}
          </div>
        </div>
        <div>{{ item.tags }}</div>
      </div>
    </div>

    <p class="text-xs text-[#8C8C8C] mb-2">客户名称: {{ item.customerName }}</p>

    <div
      class="flex flex-row justify-between p-4 rounded-lg items-center bg-gradient-to-b from-[#F0F6FE] to-[#F9FBFE]"
    >
      <div
        class="flex flex-col items-center"
        v-for="item in visitorInfos"
        :key="item.title"
      >
        <div class="flex flex-row">
          <p class="text-base text-[#595959] font-bold mr-[1px]">
            {{ item.value }}
          </p>
          <p class="text-xs text-[#595959] mt-[6px]">{{ item.unit }}</p>
        </div>
        <p class="text-[#8C8C8C] text-xs mt-1">{{ item.title }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, computed } from "vue";

const defaultLogoUrl =
  "https://meetcdn.yxt.com/lingxi-static-resources/img/default_company_logo.svg";

const props = defineProps({
  item: {
    type: Object,
    required: true,
    default: () => ({}),
  },
});

const visitorInfos = computed(() => {
  let array = [];
  array.push({
    title: "沟通次数",
    value: props.item.meetCount,
    unit: "次",
  });
  array.push({
    title: "参会人数",
    value: props.item.attendeeCount,
    unit: "个",
  });
  array.push({
    title: "提及竞对",
    value: props.item.competitorCount,
    unit: "次",
  });
  array.push({
    title: "总待办",
    value: props.item.todosCount,
    unit: "个",
  });
  return array;
});

function getStatusInfo(status) {
  let statusInfo = {
    1: {
      name: "进行中",
      color: "#436BFF",
      bgColor: "#F0F6FF",
    },
    2: {
      name: "赢单",
      color: "#04CCA4",
      bgColor: "#04CCA428",
    },
    3: {
      name: "输单",
      color: "#FA8C16",
      bgColor: "#FA8C1629",
    },
  };
  let otherInfo = {
    name: "其他",
    color: "#595959",
    bgColor: "#F5F5F5",
  };
  return statusInfo[status] || otherInfo;
}
</script>

<style lang="less" scoped>
// .gray-bg {
//     background: linear-gradient( 180deg, #F0F6FE 0%, #FFFFFF 100%);
// }
</style>
